
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>jQuery Tab选项卡插件Tabslet演示-自定义事件_dowebok</title>
<style>
.tabs { width: 900px; margin: 0 auto;}
.tabs ul { padding: 0; font-size: 0;}
.tabs ul li { display: inline-block; margin-right: 10px; _display: inline; _zoom: 1;}
.tabs ul a { display: inline-block; padding: 15px 30px; border-bottom: 4px solid #e5e5e5; font-size: 14px; color: #aaa; background-color: #f8f8f8; text-decoration: none;}
.tabs ul .active a { border-bottom-color: #68a697; color: #fff; background-color: #a0cac0;}
.tabs div { height: 200px; margin-top: 10px; line-height: 200px; text-align: center; background-color: #f8f8f8;}
</style>
<script src="/websys/static/js/jquery.min.js"></script>
<script src="/websys/static/js/jquery.tabslet.min.js"></script>
<script>
$(function(){
	$('.tabs').tabslet().on({
		'_before': function(){
			alert('before');
		},
		'_after': function(){
			alert('after');
		}
	});
});
</script>
</head>

<body>
<div class="menu">
	<p class="menuc">
		<span></span>
		<a href="./">1、默认</a>
		<a href="index2.html">2、默认显示序号</a>
		<a href="index3.html">3、hover事件</a>
		<a href="index4.html">4、动画效果</a>
		<a href="index5.html">5、自动切换</a>
		<a href="index6.html">6、绑定上一个/下一个</a>
		<a class="cur" href="index7.html">7、自定义事件</a>
		<a href="index8.html">8、HTML data属性</a>
	</p>
</div>

<div class="main">
	<div class="mianc">
		<h1>自定义事件</h1>

		<!-- Demo -->
		<div class="tabs">
			<ul>
				<li><a href="#tab-1">Tab 1</a></li>
				<li><a href="#tab-2">Tab 2</a></li>
				<li><a href="#tab-3">Tab 3</a></li>
			</ul>

			<div id="tab-1">Tab 1</div>
			<div id="tab-2">Tab 2</div>
			<div id="tab-3">Tab 3</div>
		</div>
		<!-- Demo end -->

		<div class="code">
			<h3 class="h31 cur">JavaScript</h3>
			<div class="pre">
<pre class="pre-show prettyprint linenums">$(function(){
    $('.tabs').tabslet().on({
        '_before': function(){
            alert('before');
        },
        '_after': function(){
            alert('after');
        }
    });
});</pre>
			</div>

			<h3 class="h32">HTML</h3>
			<div class="pre">
<pre class="pre-show prettyprint linenums">&lt;div class="tabs"&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a href="#tab-1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab-2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab-3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;

    &lt;div id="tab-1"&gt;Tab 1&lt;/div&gt;
    &lt;div id="tab-2"&gt;Tab 2&lt;/div&gt;
    &lt;div id="tab-3"&gt;Tab 3&lt;/div&gt;
&lt;/div&gt;</pre>
			</div>
		</div>

		<p class="vad">
			<a href="http://www.dowebok.com/" target="_blank">dowebok.com</a>
			<a href="http://www.dowebok.com/99.html" target="_blank">说 明</a>
			<a href="http://www.dowebok.com/99.html" target="_blank">下 载</a>
		</p>

		<div class="thead"><script>
var cpro_id = "u2131690";
</script>
<script src="http://cpro.baidustatic.com/cpro/ui/c.js"></script>
</div>
	</div>
</div>

</body>
</html>